VUE+ElementUI图片上传的判断格式、大小、尺寸（即宽高比）完整实现。 |
您所在的位置：网站首页 › 图片宽高比例14 比16 › VUE+ElementUI图片上传的判断格式、大小、尺寸（即宽高比）完整实现。 |
VUE+ElementUI图片上传的判断格式、大小、尺寸（即宽高比）完整实现。
|
需求分析： 表单中需要上传图片，并对图片做出限制： 1）上传图片大小不能超过 2M； 2）上传图片格式只能是jpg或png； 3）上传图片的宽高比例为2：1。 效果如图所示： HTML： 只能上传宽高比例为2：1的 jpg/png文件，且不超过2MCSS样式： .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon { color: #8c939d; width: 50px; height: 50px; line-height: 50px; text-align: center; } .el-upload__tip { position: relative; bottom: 20px; left: 20px; } .avatar { width: 50px; height: 50px; display: block; }JS：（其中uploadlogo须在data中声明，存储图片文件，这是提交表单时所需要传参的数据） // 改变logo图片时做判断 picchange(file) { this.$refs.upload.clearFiles() console.log(file) const isJPG = file.raw.type === "image/jpeg" || file.raw.type === "image/png" const isLt2M = file.raw.size / 1024 / 1024 { //data返回值即为判断结果。 if (data) { this.form.logo_src = URL.createObjectURL(file.raw)//预览图 this.logoupload = file.raw } }) } }, //判断尺寸方法 imgchecked(file) { return new Promise((resolve, reject) => { let reader = new FileReader() reader.readAsDataURL(file.raw) // 必须用file.raw reader.onload = () => { // 让页面中的img标签的src指向读取的路径 let img = new Image() img.src = reader.result img.onload = () => { if (img.width / img.height !== 2) { this.$message.warning( `需上传图片宽高比例为2：1,当前文件${img.width}×${img.height}` ) resolve(false) } else { resolve(true) } } } }) },打印出file看看。 file文件中直接存储有图片名字、大小和类型，如果不需要判断尺寸只用picchange即可，我这里是直接把判断宽高比的操作提出来了。 判断图片的宽高的操作利用了JavaScript的原生API FileReader。 是在这位大佬这边看到的解决方法：https://blog.csdn.net/m0_48721669/article/details/118941638?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-1.no_search_link&spm=1001.2101.3001.4242 当文件读取完成后就可以获取img的宽高啦。 因为对Promise对象不熟所以弄了很久，需要通过then（）来获取判断结果。需要复习： https://es6.ruanyifeng.com/#docs/promise https://www.cnblogs.com/lvdabao/p/es6-promise-1.html |
利用on-change的钩子写判断方法。 
【本文地址】
今日新闻 |
推荐新闻 |